<template>
	<view class="bg-white p-2">
		<view class="p-2" style="width: 2000rpx;">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="flex align-center justify-between" style="width: 2000rpx;">
					<uni-forms-item :label-width="80" label="单据状态" name="name">
						<view class="flex">
							<uni-data-select style="width: 350rpx;" empty-text="暂无发票单号" placeholder="请选择单据状态" v-model="Selectvalue"
								:localdata="range" @change="change"></uni-data-select>
							<button style="width: 200rpx;height: 60rpx;line-height: 60rpx;"
								class="text-white bg-orange ml-2">搜索</button>
						</view>
					</uni-forms-item>
					<uni-forms-item name="age">
						<view class="flex align-center">
							<button style="width: 200rpx;height: 60rpx;line-height: 60rpx;"
								class="text-white bg-orange mr-2">下载</button>
							<button style="width: 200rpx;height: 60rpx;line-height: 60rpx;"
								class="text-white bg-orange">预览</button>
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
			<!-- 表格 -->
			<view class="mt-2 flex flex-column">
				<view class="w-100 flex font-sm font-weight-bold"
					style="background-color: rgb(245,245,245);height: 80rpx;">
					<view class="text-center" style="width: 14%;line-height: 80rpx;">
						<text>单据号</text>
					</view>
					<view class=" text-center" style="width: 18%;line-height: 80rpx;">
						<text>收票客户名称</text>
					</view>
					<view class=" text-center" style="width: 12%;line-height: 80rpx;">
						<text>合同号</text>
					</view>
					<view class=" text-center" style="width: 12%;line-height: 80rpx;">
						<text>数量</text>
					</view>
					<view class=" text-center" style="width: 12%;line-height: 80rpx;">
						<text>单价</text>
					</view>
					<view class=" text-center" style="width: 9%;line-height: 80rpx;">
						<text>开票金额</text>
					</view>
					<view class=" text-center" style="width: 15%;line-height: 80rpx;">
						<text>商品名称</text>
					</view>
					<view class=" text-center" style="width: 8%;line-height: 80rpx;">
						<text>单据状态</text>
					</view>
				</view>
				<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
					暂无数据
				</view>
				<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
					v-for="(item,index) in 4" :key="index">
					<view class=" flex justify-center align-center" style="border-left:2rpx solid rgb(221,221,211);width: 14%;line-height: 70rpx;">
						<text>3151514651</text>
					</view>
					<view class="flex align-center justify-center" style="width: 18%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>李四</text>
						</view>
					</view>
					<view class="flex align-center justify-center " style="width: 12%;line-height: 70rpx;">
						<view class="flex justify-center w-100">
							<text class="text-ellipsis">45641654165</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>100斤</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>￥50/斤</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 9%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>￥5000</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 15%;line-height: 70rpx;">
						<text class="text-ellipsis" title="250kg无敌大豆油啦啦啦啦啦啦阿联">250kg无敌大豆油啦啦啦啦啦啦啦啦阿联</text>
					</view>
					<view class="flex align-center justify-center text-danger" style="border-right:2rpx solid rgb(221,221,211);width: 8%;line-height: 70rpx;">
						已作废
					</view>
				</view>
				<view class="flex" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);">
					<view class="flex align-center justify-center " style="border-right:2rpx solid rgb(221,221,211);border-left:2rpx solid rgb(221,221,211); width: 33%;line-height: 70rpx;">
						<view class="flex justify-center w-100">
							<text class="text-ellipsis font-weight-bold">汇总</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="border-right:2rpx solid rgb(221,221,211);width: 33%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>数量:400斤</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 34%;border-right:2rpx solid rgb(221,221,211);line-height: 70rpx;">
						<view class="flex justify-center">
							<text>开票金额:￥20000元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PurchaseSaleinvoices",
		data() {
			return {
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
					single: '',
				},
				Selectvalue: '',
				range: [{
						value: 0,
						text: "交易员已申请"
					},
					{
						value: 1,
						text: "开票员已审批"
					},
					{
						value: 2,
						text: "单据开具完成"
					},
					{
						value: 3,
						text: "线下开票申请"
					},
					{
						value: 4,
						text: "线下发票完成"
					},
					{
						value: 5,
						text: "线下发票补登待确认"
					},
					{
						value: 6,
						text: "线下发票补登退回"
					},
					{
						value: 7,
						text: "开票处理中"
					},
					{
						value: 8,
						text: "发票信息未同步"
					},
					{
						value: 9,
						text: "发票信息同步成功"
					},
					{
						value: 10,
						text: "开票失败"
					},
					{
						value: 11,
						text: "发票退回"
					},
					{
						value: 12,
						text: "开票信息退回"
					},
					],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
			};
		},
		methods: {
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">

</style>